<template>
  <!-- 列表 -->
  <Dialog title="转账" v-model="dialogVisible">
    <el-card>
      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
        <!--      <el-table-column label="ID" align="center" prop="id" />-->
        <!--       <el-table-column label="用户Id" align="center" prop="wid" />-->
        <el-table-column label="账户类型" align="center" prop="type">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.WO_ACCOUNT_TYPE" :value="scope.row.type" />
          </template>
        </el-table-column>
        <el-table-column label="余额" align="center" prop="amount" />
        <el-table-column label="总额" align="center" prop="totalAmount" />
        <el-table-column label="冻结" align="center" prop="lockAmount" />
        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          :formatter="dateFormatter"
          width="180px"
        />
      </el-table>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-form :model="transferData" :rules="formRules" ref="formRef">
        <el-form-item label="转账人手机" prop="fromPhone">
          <el-input v-model="transferData.fromPhone" placeholder="请输入转账手机,公司默认0" />
        </el-form-item>
        <el-form-item label="接收人手机" prop="toPhone">
          <el-input v-model="transferData.toPhone" placeholder="输入接收人手机" />
        </el-form-item>

        <el-form-item label="转账的数量" prop="amount">
          <el-input type="number" v-model="transferData.amount" placeholder="转账的数量" />
        </el-form-item>

        <el-form-item label="转账的类型" prop="type">
          <el-select
            v-model="transferData.type"
            placeholder="请选择账户类型"
            clearable
            class="!w-240px"
          >
            <el-option
              v-for="dict in getIntDictOptions(DICT_TYPE.WO_ACCOUNT_TYPE)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="转账的原因" prop="info">
          <el-input v-model="transferData.info" placeholder="转账的原因" />
        </el-form-item>
      </el-form>
    </el-card>
    <template #footer>
      <el-button @click="submitForm" type="primary">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import { MemberApi, TransferVO } from '@/api/wo/member'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const props = defineProps<{
  memberId?: number // 会员ID（主表的关联字段）
}>()
const loading = ref(false) // 列表的加载中
const list = ref([]) // 列表的数据
const dialogVisible = ref(false)

const transferData = ref({
  fromPhone: '',
  toPhone: '',
  amount: undefined,
  type: undefined,
  busId: '',
  info: ''
})

const formRules = reactive({
  fromPhone: required,
  toPhone: required,
  amount: required,
  type: required
})

const submitForm = async () => {
  try {
    await formRef.value.validate()
    await MemberApi.transferAccount(transferData.value as TransferVO)
    message.success(t('common.updateSuccess'))
    emit('success')
  } finally {
    dialogVisible.value = false
  }
}

function resetForm() {
  transferData.value = {
    fromPhone: '',
    toPhone: '',
    amount: undefined,
    type: undefined,
    info: undefined,
    busId: new Date().getTime() + ''
  } as any
  formRef.value?.resetFields()
}

const formRef = ref()

const open = async (phone: string, id?: number) => {
  dialogVisible.value = true
  // dialogTitle.value = type
  // formType.value = type
  await getList(id)
  resetForm()
  transferData.value.fromPhone = '0'
  transferData.value.toPhone = phone

  // 修改时，设置数据
  // if (id) {
  //   formLoading.value = true
  //   try {
  //     formData.value = await MemberApi.getMember(id)
  //   } finally {
  //     formLoading.value = false
  //   }
  // }
}

defineExpose({ open })

const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调

/** 查询列表 */
const getList = async (id: number) => {
  console.log('????')
  loading.value = true
  try {
    list.value = await MemberApi.getAccountListByMemberId(id)
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
// const handleQuery = () => {
//   queryParams.pageNo = 1
//   getList()
// }

/** 初始化 **/
onMounted(() => {
  // getList()
})
</script>
